---
title: Next.js
description: Next.js-specifikus lintelési szabályok az Ultracite számára.
---

A Next.js konfiguráció Next.js-specifikus lintelési szabályokat tartalmaz a képek optimalizálására, a dokumentumszerkezetre és az App Router mintákra vonatkozóan.

## Telepítés

Add hozzá a Next.js konfigurációt a `biome.jsonc` fájlodhoz:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Áttekintés

Ez a konfiguráció Next.js fejlesztésre vonatkozó szabályokat ad hozzá:

- **Képoptimalizálás**: Kötelező a Next.js Image komponens használata
- **Dokumentumszerkezet**: Megakadályozza a Next.js speciális komponenseinek helytelen használatát
- **Kliens komponensek**: Biztosítja, hogy az aszinkron kliens komponenseket helyesen kezeljék
- **Konfigurációs fájlok**: Speciális kezelés a `next.config.*` fájlokhoz

## Next.js-specifikus szabályok

### Nursery

| Szabály | Beállítás | Leírás |
|--------|-----------|--------|
| `noNextAsyncClientComponent` | `error` | Megakadályozza az aszinkron kliens komponenseket Next.js-ben. A kliens komponenseknek szinkronnak kell lenniük; aszinkron műveletekhez használj szerver komponenseket. |

### Teljesítmény

| Szabály | Beállítás | Leírás |
|--------|-----------|--------|
| `noImgElement` | `error` | Tiltja a `<img>` HTML elem használatát. Használd helyette a Next.js `<Image>` komponenst az automatikus képoptimalizálás érdekében. |

### Stílus

| Szabály | Beállítás | Leírás |
|--------|-----------|--------|
| `noHeadElement` | `error` | Tiltja a `<head>` HTML elem használatát. Használd helyette a Next.js `next/head`-et vagy az App Router metadata API-t. |

### Gyanús

| Szabály | Beállítás | Leírás |
|--------|-----------|--------|
| `noDocumentImportInPage` | `error` | Megakadályozza a `next/document` importálását oldal fájlokban. A `_document.tsx`-nek csak a `pages/_document.tsx`-ben szabad léteznie. |
| `noHeadImportInDocument` | `error` | Megakadályozza a `next/head` importálását `_document.tsx`-ben. Használd helyette a `<Head>`-et a `next/document`-ból. |

## Konfigurációs fájl felülírások

A Next.js előbeállítás speciális kezelést tartalmaz a konfigurációs fájlokhoz és az App Router komponensekhez:

### Next.js konfigurációs fájlok

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Ez lehetővé teszi olyan Next.js konfigurációs mintákat, amelyek egyébként nem feltétlenül mennének át a lintelési szabályokon.

### App Router oldalak és layoutek

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Az App Router oldal- és layout komponensek megengedettek aszinkronnak `await` nélkül, mivel a Next.js ezeket külön kezeli a szerveroldali renderelés és adatlekérés során.